const { src, dest, watch, series, parallel } = require("gulp");
const del = require("del");

const loadPlugins = require("gulp-load-plugins");
const browserSync = require("browser-sync");
const $ = loadPlugins();
const bs = browserSync.create();
const data = {
  menus: [
    {
      name: "Home",
      icon: "aperture",
      link: "index.html",
    },
    {
      name: "Features",
      link: "features.html",
    },
    {
      name: "About",
      link: "about.html",
    },
    {
      name: "Contact",
      link: "#",
      children: [
        {
          name: "Twitter",
          link: "https://twitter.com/w_zce",
        },
        {
          name: "About",
          link: "https://weibo.com/zceme",
        },
        {
          name: "divider",
        },
        {
          name: "About",
          link: "https://github.com/zce",
        },
      ],
    },
  ],
  pkg: require("./package.json"),
  date: new Date(),
};
const clean = () => {
  return del(["dist", "temp"]);
};

const style = () => {
  return src("src/assets/styles/*.scss", { base: "src" })
    .pipe($.sass({ outputStyle: 'expanded' }))
    .pipe(dest("temp"));
};

const script = () => {
  return src("src/assets/scripts/*.js", { base: "src" })
    .pipe($.babel({ presets: ["@babel/preset-env"] }))
    .pipe(dest("temp"));
};

const page = () => {
  return src("src/*.html", { base: "src" })
    .pipe($.swig({ data, defaults: { cache: false } }))
    .pipe(dest("temp"));
};

const image = () => {
  return src("src/assets/images/**", { base: "src" })
    .pipe($.imagemin())
    .pipe(dest("dist"));
};
const font = () => {
  return src("src/assets/fonts/**", { base: "src" })
    .pipe($.imagemin())
    .pipe(dest("dist"));
};
const extra = () => {
  return src("public/**", { base: "public" }).pipe(dest("dist"));
};

const serve = () => {
  watch("src/assets/styles/*.scss", style);
  watch("src/assets/scripts/*.js", script);
  watch("src/*.html", page);
  watch(['src/assets/images/**', 'src/assets/fonts/**', 'public/**'], bs.reload)

  bs.init({
    notify: false,
    port: 9090,
    files: ['src', 'public'],
    server: {
      baseDir: ["temp", "src", "public"],
      routes: {
        '/node_modules': 'node_modules'
      }
    },
  });
};

const useref = () => {
  return src('temp/*.html', {base: 'temp'})
  .pipe($.useref({searchPath: ['temp', '.']}))
  .pipe($.if(/\.js$/, $.uglify()))
  .pipe($.if(/\.css$/, $.cleanCss()))
  .pipe($.if(/\.html$/, $.htmlmin({
    collapseWhitespace: true,
    minifyCSS: true,
    minifyJS: true
  })))
  .pipe(dest('dist'))
}

const compile = parallel(style, script, page)

const develop = series(compile, serve)

const build = series(clean, parallel(
  series(compile, useref),
  image,
  font,
  extra
))

module.exports = {
  clean,
  develop,
  build
};
